<template>
  <el-dialog v-model="dialogVisible" title="参考资料" width="80vw">
    <div class="course-wrapper" style="height: 60vh">
      <el-scrollbar style="height: 100%; width: 100%">
        <div class="list padding-10">
          <template v-if="data.length">
            <div
              v-for="(item, index) in data"
              :key="index"
              @click="handleViewData(item)"
            >
              <div
                class="item-kno border-radius padding-10"
                style="height: 100px; width: 220px"
              >
                <div style="display: flex; height: 60px">
                  <div class="w-60">
                    <el-icon :size="42" style="color: var(--el-color-primary)">
                      <Document />
                    </el-icon>
                  </div>
                  <p class="text-title">
                    {{ item.filename }}
                  </p>
                </div>
                <div class="data-num" style="font-size: 12px">
                  <el-text style="font-size: 12px" truncated>
                    {{ item.admin_name }}上传于
                    {{ item.created_at.replace('T', ' ') }}
                  </el-text>
                </div>
              </div>
            </div>
          </template>
          <div v-else style="margin: 0 auto">
            <el-empty description="暂无资料" />
          </div>
        </div>
      </el-scrollbar>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dialogVisible = defineModel('visible')
const data: any[] = defineModel('data')
const handleViewData = (item) => {
  const url = router.resolve({
    path: '/study/data-items',
    query: {
      data_id: item.id,
      course_id: route.query.course_id,
    },
  })
  window.open(url.href, '_blank')
}
</script>
<style scoped lang="scss">
.text-title {
  height: 48px;
  width: 100%;
  text-align: start;
  @include textMultipleBeyondOmit(2);
}
.course-wrapper {
  height: calc(100vh - 125px);
  .list {
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .item-kno {
    background: var(--el-bg-color);
    transition: color 0.2s, background-color 0.2s;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.24);
    position: relative;
    cursor: pointer;
    &:hover {
      transform: scale(1.02);
    }
  }

  .dark {
    .item-kno {
      background: var(--el-color-info-light-9);
      box-shadow: var(--el-box-shadow-lighter);
    }
  }
}
</style>
